<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6默认值参数和可变参数</title>
</head>
<body>
    <script>
    //箭头函数--具名函数
    //这种方式函数会被提上到作用域
    /**
     * 特性:
        函数声明会被提升 (Hoisting)，即函数的定义会在代码执行前被提升到作用域的顶部。
        这意味着即使在函数声明之前调用它，代码也能正常运行。
        作用域:
        函数声明会绑定到当前作用域的变量对象中，通常是全局作用域或函数作用域。
         function add(a,b){
            return a+b;
          }
          console.log(add(1,2))
    */
   
    //函数表达式
    /***
     * 特性:
      函数表达式不会被提升。只有在代码执行到 let add = function... 这一行时，add 才会被赋值。
      如果在赋值之前调用 add，会抛出 ReferenceError。
      作用域:

      函数表达式的变量名（如 add）遵循 let 的作用域规则，具有块级作用域。
          let add = function(a,b){
            return a+b;
          }
          console.log(add(1,2))
    */


    let addfunction = (a,b)=>{return a+b}
    console.log(addfunction(1,2))

    let createObj = (id)=>{
      //console.log("箭头函数中不存在arguments",arguments) //arguments is not defined
      return {
        id:1,
        name:'张三',
        age:23
      }
    }
    console.log(createObj())
    console.log(createObj)
    //箭头函数不能使用new关键字来实例化对象，箭头函数不是一个对象，实质上是一个函数表达式
    //console.log(new createObj()) // createObj is not a constructor

    //function函数是一个对象，可以通过new创建
     let Person = function(id){
      return {
        id:1,
        name:'张三',
        age:23
      }
    }
    console.log(Person)
    let per = new Person();
    console.log(per)



    //this的指向问题分析
    //不使用箭头函数
    // let pageHandle ={
    //   id:123,
    //   init:function(){
    //     document.addEventListener('click',function handleEvent(event){
    //       console.log(this) //此时的this指向是触发该事件的对象HTMLDocument，并不是pageHandle对象
    //       this.doSomething(event.type)
    //     },false)
    //   },
    //   doSomething: function(type){
    //     console.log(`事件类型：${type},当前id：${this.id}`)
    //   }
    // }
    // pageHandle.init();
    //使用箭头函数
    let pageHandle ={
          id:123,
          init:function(){ //但是这里不能使用箭头函数，否则this就是windows，而windows并没有doSomething方法
            document.addEventListener('click',(event)=>{
              console.log(this) //此时的this没有指向，通过查找作用域链找到pageHandle
              this.doSomething(event.type)
            },false)
          },
          doSomething: function(type){
            console.log(`事件类型：${type},当前id：${this.id}`)
          }
        }
        pageHandle.init();


    </script> 
</body>
</html>